import * as React from "react"
import { observer, inject } from "mobx-react"

import {
  View,
  Image,
  ViewStyle,
  Text,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  StatusBar
} from "react-native"
import { Screen } from "../../components/screen"
import { Tabs } from "@ant-design/react-native"
import { Button } from "../../components/button/button"
import { Icon } from "../../components/icon"
import { spacing } from "../../theme"
import { px2dp } from "../../utils"
import { color } from "../../theme/base/color"
import { Line } from "../../components/line"
import UnsettlementScreen from "./UnsettlementScreen"
import NoneDataIcon from "./NoneDataIcon"
import { images } from "../../assets"
import DataPickerFilter from "./DataPickerFilter"

// headerStyle
const headerStyle: ViewStyle = {
  flexDirection: "row",
  paddingHorizontal: spacing[4],
  alignItems: "center",
  paddingTop: spacing[5],
  paddingBottom: spacing[5],
  justifyContent: "flex-start",
  backgroundColor: color.background,
  borderBottomColor: "#eee",
  borderBottomWidth: px2dp(1),
  borderStyle: "solid"
}

const titleStyle: ViewStyle = {
  flex: 1,
  justifyContent: "center",
  flexDirection: "row"
}

const tabStyle = StyleSheet.create({
  item: {
    color: "#333",
    fontSize: px2dp(18),
    paddingHorizontal: px2dp(8)
  }
})

const containerStyle: ViewStyle = {
  marginHorizontal: px2dp(16)
}

const RecordItemStyle: ViewStyle = {
  paddingTop: px2dp(14),
  paddingBottom: px2dp(14),
  marginBottom: px2dp(14),
  backgroundColor: color.palette.white,
  borderRadius: px2dp(8)
}

const cardHeadeStyle: ViewStyle = {
  borderLeftColor: color.themeColor,
  alignItems: "center",
  borderLeftWidth: px2dp(2),
  paddingLeft: px2dp(14),
  paddingRight: px2dp(14),
  flexDirection: "row",
  justifyContent: "space-between"
}

const cardHeadeLeftStyle: ViewStyle = {}

const cardHeadeRightStyle: ViewStyle = {}

const LineStyle: ViewStyle = {
  paddingTop: px2dp(14),
  marginLeft: px2dp(14),
  paddingBottom: px2dp(14)
}

const RecordOverviewStyle: ViewStyle = {
  paddingHorizontal: px2dp(14),
  paddingVertical: px2dp(8)
}

const matchItemStyle: ViewStyle = {
  flexDirection: "row",
  justifyContent: "space-between",
  paddingTop: px2dp(5),
  paddingBottom: px2dp(5),
  paddingLeft: px2dp(14),
  paddingRight: px2dp(14)
}

const matchConfirmedStyle: ViewStyle = {
  position: "absolute",
  right: px2dp(14),
  bottom: px2dp(40)
}

const timeTabStyle: ViewStyle = {
  flex: 1
}

// 时间选项卡组件
const testtest: any = [1, 2, 3, 4, 5, 45, 6, 7, 7, 7]
function TimeTabs(props: any) {
  return (
    <Tabs
      initialPage={0}
      tabs={props.tabData}
      renderTab={tab => (
        <View style={{ flexDirection: "row", alignItems: "center" }}>
          <Text>{tab.title}</Text>
          {tab.title === "筛选" && <Image source={images.mine.betRecord.fliter} />}
        </View>
      )}
      onTabClick={(tab: any, index: number) => {
        if (tab.title === "筛选") {
          return
        }
        console.log(tab, index)
      }}
      tabBarUnderlineStyle={{ borderColor: "#eee" }}
    >
      <View style={timeTabStyle}>
        <Recordoverview />
        {testtest.length !== 0 ? (
          <ScrollView
            contentContainerStyle={containerStyle}
            onMomentumScrollEnd={() => {
              console.log("到底了")
            }}
          >
            {testtest.map((data: any, index: number) => {
              return <RecordItem {...props} key={index} typeId={12} recordId={22} />
            })}
          </ScrollView>
        ) : null}
        <NoneDataIcon listData={testtest} title="无结算注单" subTitle="请您确认您的注单状态" />
      </View>
      <View style={timeTabStyle}>{/* {props.children.today} */}</View>
      <View style={timeTabStyle}>{/* {props.children.today} */}</View>
      <View style={timeTabStyle}>
        <DataPickerFilter />
      </View>
    </Tabs>
  )
}

// 数据总览组件
function Recordoverview() {
  return (
    <View style={RecordOverviewStyle}>
      <Text style={{ fontSize: px2dp(12), color: color.palette.grayBlue }}>
        总计 {2} 单,有效流水 {10.0} 元,输赢{" "}
        <Text style={{ color: color.palette.angry }}>{2000.0}</Text>元
      </Text>
    </View>
  )
}

// 投注记录条目组件
interface RecordItemProps {
  history: any
  typeId: any
  recordId: any
}
class RecordItem extends React.Component<RecordItemProps, {}> {
  toRecordDetail(id: number | string, type: number | string) {
    this.props.history.push({
      pathname: "/mineBetRecordDetailScreen",
      query: {
        id: id,
        type: type
      }
    })
  }
  render() {
    return (
      <TouchableOpacity
        activeOpacity={0.2}
        onPress={() => this.toRecordDetail(this.props.typeId, this.props.recordId)}
      >
        <View style={RecordItemStyle}>
          <View style={cardHeadeStyle}>
            <View style={cardHeadeLeftStyle}>
              <Text>澳大利亚维多利亚国家超级联赛</Text>
            </View>
            <View style={cardHeadeRightStyle}>
              <Text style={{ color: color.themeColor }}>详情 ></Text>
            </View>
          </View>
          <View style={LineStyle}>
            <Line />
          </View>
          <View>
            <View style={matchItemStyle}>
              <Text>维多利亚-0.5</Text>
              <Text style={{ color: color.themeColor }}>@0.8</Text>
            </View>
            <View style={matchItemStyle}>
              <Text style={{ color: color.info, fontSize: px2dp(12) }}>滚球 让球（0:0）</Text>
            </View>
            <View style={matchItemStyle}>
              <Text style={{ color: color.info, fontSize: px2dp(12) }}>维多利亚 v 瓦达克斯家</Text>
            </View>
            <View style={matchItemStyle}>
              <View style={{ flexDirection: "row" }}>
                <Text style={{ color: color.info }}>本金</Text>
                <Text>$10.00</Text>
              </View>
              <View style={{ flexDirection: "row" }}>
                <Text style={{ color: color.info }}>返还</Text>
                <Text>$10.00</Text>
              </View>
            </View>
            <View style={matchConfirmedStyle}>
              <Text style={{ fontSize: 12, color: color.info }}>已确认</Text>
            </View>
            <View style={{ position: "absolute", right: px2dp(14), bottom: px2dp(10) }}>
              <Image
                style={{ width: px2dp(71), height: px2dp(74) }}
                source={images.mine.betRecord.winGame}
              />
            </View>
            <View style={matchConfirmedStyle}>
              <Text style={{ fontSize: 12, color: "green" }}>输</Text>
            </View>
            <View style={matchConfirmedStyle}>
              <Text style={{ fontSize: 12, color: color.info }}>和</Text>
            </View>
          </View>
        </View>
      </TouchableOpacity>
    )
  }
}

export interface MineBetRecordScreenProps {
  rootStore: any
  history: any
}

export interface MineBetRecordScreenState {
  activeTitleTab: number | string
  SettlementType: any
}

@inject("rootStore")
@observer
class MineBetRecordScreen extends React.Component<
  MineBetRecordScreenProps,
  MineBetRecordScreenState
> {
  state = {
    overviewDate: {},
    SettlementType: [
      {
        title: "已结算",
        type: 0
      },
      {
        title: "未结算",
        type: 1
      }
    ],
    activeTitleTab: 0,
    tabs: [{ title: "今天" }, { title: "昨天" }, { title: "七天内" }, { title: "筛选" }]
  }
  componentDidMount() {
    // 挂载组件,此生命周期请求数据
    console.log(this.state)
  }
  // 已结算/未结算切换
  settlementQuest(type: any) {
    console.log(type)
    // 请求数据
    // loading
  }
  render() {
    return (
      <Screen statusBar="light-content" style={{ backgroundColor: color.backgroundInnerPage }}>
        <StatusBar barStyle="dark-content" />
        <View style={headerStyle}>
          <Button preset="link" onPress={() => this.props.history.goBack()}>
            <Icon icon="back" />
          </Button>
          <View style={titleStyle}>
            {this.state.SettlementType.map((item, i) => {
              return (
                <View key={i}>
                  <Text
                    style={[
                      tabStyle.item,
                      {
                        color:
                          this.state.activeTitleTab === i ? color.themeColor : color.palette.black
                      }
                    ]}
                    onPress={() => {
                      this.settlementQuest(item.type)
                      this.setState({ activeTitleTab: i })
                    }}
                  >
                    {item.title}
                  </Text>
                </View>
              )
            })}
          </View>
          <Button preset="link" onPress={() => alert("打开客服组件")}>
            <Icon icon="bullet" />
          </Button>
        </View>
        {this.state.activeTitleTab === 0 ? (
          <View style={{ flex: 1 }}>
            {/* 时间筛选选项卡 */}
            <TimeTabs tabData={this.state.tabs} {...this.props} />
          </View>
        ) : null}
        {this.state.activeTitleTab === 1 ? (
          // 传入未结算列表数据
          <UnsettlementScreen listData={[1, 2, 3, 4, 5]} {...this.props} />
        ) : null}
      </Screen>
    )
  }
}

export default MineBetRecordScreen
